<!--下拉框树形选择器-->
<template>
  <a-select ref="menSelect" v-model="id" style="width:250px" allowClear placeholder="无" @on-clear="onClear">
    <a-select-option v-for="item in list" :value="item.id" :key="item.id" style="display: none;">{{ item.title }}
    </a-select-option>
    <Tree :data="treeList" @on-select-change="handleCheckChange" style="width:90%;"></Tree>
  </a-select>
</template>
<script>
  export default {
    name: 'selectTree',
    props: {
      treeList: Array,
      selectedNode: Object,
      value:{
        type: String,
        required: false,
        default: ''
      }
    },
    data() {
      return {
        list: [],
        id:''
      };
    },
    watch: {
      selectedNode(val) {
        this.id = val.id;
        this.list = [
          {
            id: val.id,
            title: val.name
          }
        ];
        this.$emit('selectTreeData', {id:val.id,name:val.name});
      }
    },
    methods: {
      /**
       * Function    : handleCheckChange
       * Description : 点击树节点时触发，获取树节点数据
       * Input       : data
       * Return      : none
       */
      handleCheckChange(data) {
        this.list = [];
        this.list.push({
          id: data[0].id,
          title: data[0].title
        });
        this.id = data[0].id;
        this.$refs.menSelect.visible = false;
        data[0].selected = false;
        this.$emit('selectTreeData', {id:data[0].id,name:data[0].title});
      },
      onClear(){
        this.id = '';
        this.$emit('selectTreeData', {id:null,name:null});
      }
    }
  };
</script>
